import React, { useContext } from 'react'
import { Input } from 'antd';

import { FolderOutlined, DownOutlined, FileOutlined, UpOutlined } from '@ant-design/icons';
import { IreddirtoString } from '../redux/util';
import { Then } from '../redux';

// import Listchild from './list'
interface Iprops {
    reddirto: IreddirtoString[];
    index: number;
    ind: null | string
}
const List = ({
    reddirto, index, ind
}: Iprops) => {
    const { dispatch } = useContext(Then);
    let style = {
        paddingLeft: index == 0 ? '0' : '10px'
    }
    let i = ind == null ? '' : ind + '_'
    return (
        <div style={style}>


            {reddirto.length > 0 && reddirto.map((res, j) => (
                <div key={res.id}>
                    {
                        res.type === "folder" ?
                            <div>
                                < div className="folder cursor">
                                    <div className="folder_title"> <div className="folder_title_left">
                                        <FolderOutlined />
                                        <div className="folder_title_left_name">{res.title}</div>
                                        {/* <Input autoFocus={false} placeholder="Newfiles" className="folder_title_left_name list_tab" /> */}
                                    </div>
                                        {
                                            res.drop_down ? <UpOutlined /> : <DownOutlined />
                                        }

                                    </div>
                                    <div data-level="1" data-index={i + j} className="files" onClick={(e) => {
                                        e.preventDefault()
                                        res['index'] = i + j
                                        dispatch({ type: "folderDrop_down", res })
                                    }}>
                                    </div>

                                </div>
                                {
                                    res.drop_down ? ((res.child === null || res.child === []) ||
                                        < List reddirto={res.child} ind={i + j} index={index + 1}></List>

                                    ) : ''
                                }
                            </div>
                            : <div className="folder cursor ">
                                <div className="folder_title"> <div className="folder_title_left">
                                    <FileOutlined />
                                    <div className="folder_title_left_name">{res.title}</div>
                                    {/* <Input autoFocus={true} placeholder="Newfile"
                        className="folder_title_left_name list_tab"
                    /> */}
                                    <div data-level="2" data-index={i + j} onClick={(e) => {
                                        e.preventDefault()
                                        res['index'] = i + j
                                        dispatch({ type: "fileDrop_down", res })
                                    }} className={res.drop_down ? 'fileActive file' : 'file'}>
                                    </div>
                                </div>
                                </div>
                            </div>
                    }
                </div>
            ))
            }
        </div>
    )
}


export default List